<template>
  <el-table
    :data="dataList"
    border
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      header-align="center"
      align="center"
      width="50"
    ></el-table-column>
    <el-table-column
      prop="id"
      header-align="center"
      align="center"
      label="id"
    ></el-table-column>
    <el-table-column
      prop="spuName"
      header-align="center"
      align="center"
      label="名称"
    ></el-table-column>
    <el-table-column
      prop="spuDescription"
      header-align="center"
      align="center"
      label="描述"
    ></el-table-column>
    <el-table-column
      prop="catalogId"
      header-align="center"
      align="center"
      label="分类"
    ></el-table-column>
    <el-table-column
      prop="brandId"
      header-align="center"
      align="center"
      label="品牌"
    ></el-table-column>
    <el-table-column
      prop="weight"
      header-align="center"
      align="center"
      label="重量"
    ></el-table-column>
    <el-table-column
      prop="publishStatus"
      header-align="center"
      align="center"
      label="上架状态"
    >
      <template #default="scope">
        <el-tag v-if="scope.row.publishStatus == 0">新建</el-tag>
        <el-tag v-if="scope.row.publishStatus == 1">已上架</el-tag>
        <el-tag v-if="scope.row.publishStatus == 2">已下架</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="createTime"
      header-align="center"
      align="center"
      label="创建时间"
    ></el-table-column>
    <el-table-column
      prop="updateTime"
      header-align="center"
      align="center"
      label="修改时间"
    ></el-table-column>
    <el-table-column
      fixed="right"
      header-align="center"
      align="center"
      width="150"
      label="操作"
    >
      <template #default="scope">
        <el-button
          v-if="scope.row.publishStatus == 0"
          size="small"
          @click="productUp(scope.row.id)"
        >
          上架
        </el-button>
        <el-button size="small" @click="attrUpdateShow(scope.row)">
          规格
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :total="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
  />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, defineExpose } from 'vue'
import { reqSpuInfo, reqUpSpu } from '@/api/product/spu'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

let dataForm = reactive<Object>({
  catelogId: 0,
  brandId: 0,
  min: 0,
  max: 0,
  key: '',
})
const dataList = ref([])
const pageIndex = ref(1)
const pageSize = ref(10)
const totalPage = ref(0)
const dataListSelections = ref([])
const dataListLoading = ref(false)
const router = useRouter()

const props = defineProps({
  catId: {
    type: Number,
    default: 0,
  },
  dataFormSpu: {
    type: Object,
    default: () => ({
      catelogId: 0,
      brandId: 0,
      min: 0,
      max: 0,
      key: '',
    }),
  },
})

const getDataList = async () => {
  if (props.dataFormSpu) {
    dataForm = props.dataFormSpu
  }
  dataListLoading.value = true
  let param = {
    ...dataForm,
    page: pageIndex.value,
    limit: pageSize.value,
  }
  try {
    const response = await reqSpuInfo(param)
    if (response.code === 0) {
      dataList.value = response.page.list
      totalPage.value = response.page.totalCount
    } else {
      dataList.value = []
      totalPage.value = 0
    }
    dataListLoading.value = false
  } catch (error) {
    console.error(error)
  }
}

// 上架商品
const productUp = async (id: number) => {
  try {
    const response = await reqUpSpu(id)
    if (response.code === 0) {
      ElMessage({
        message: '品牌上架成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getDataList()
        },
      })
    } else {
      ElMessage.error(response.msg)
    }
  } catch (error) {
    console.error(error)
  }
}

const attrUpdateShow = (row: any) => {
  router.push({
    path: '/product-update',
    query: { spuId: row.id, catalogId: row.catalogId },
  })
}

// 多选
const selectionChangeHandle = (val: any) => {
  dataListSelections.value = val
}

// 每页数
const sizeChangeHandle = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

// 当前页
const currentChangeHandle = (val: number) => {
  pageIndex.value = val
  getDataList()
}

defineExpose({ getDataList })

onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss"></style>
